<template>
    <div class="container">
        <div id="siderbar1">
            <ul>

                <li>
                <router-link to="/user/postList">全部博客</router-link>
                </li>
                <li>
                    <router-link to="/user/index">我的博客</router-link>
                </li>
                <li>
                    <router-link to="/user/myRemarks">我的评论</router-link>
                </li>
                <li>
                    <router-link to="/user/myLove">我的收藏</router-link>
                </li>

                <li><a @click="logout">退出登录</a></li>
            </ul>
        </div>
        <div class="main-body">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
     methods: {
            logout() {
                axios.post('/api/logout')
                    .then(response => {
                        localStorage.reoveItemm('user');
                        this.$router.push('/login');
                })
                    .catch(error => {
                    console.log(error);
                            });
                }
                }
            }
</script>

<style lang="css">
.container {
    display: flex;
    height: 100%;
}
#siderbar1 {
    width: 250px;
    height: 100%;
    background: #000;
}
#siderbar1 li a {
    display: block;
    height:69.7px;
    line-height: 69.7px;
  margin-bottom: 68.15px;
    text-decoration: none;
    color:#fff;
}
#siderbar1 li a:hover{
  cursor: pointer;
  background: linear-gradient(90deg,#72fe53,#000000,#72fe53);
}
#siderbar1 li a.router-link-active {
  background: linear-gradient(90deg,#72fe53,#000000,#72fe53);
}

.main-body {
    flex: 1;
    height: 100%;
    background: #f5f5f5;
}
</style>